import React, { useEffect, useState } from "react";
import "./style.scss";
import { Dropdown, JumboTabs } from "antd-mobile";

import { getHousingList } from "../../../store/housing";
import { StoreStateType } from "../../../interface";
import { useSelector } from "react-redux";

const Room = () => {
  // 所有数据
  const housingData = useSelector(
    (state: StoreStateType) => state.PublicReducer.housingList
  );

  useEffect(() => {
    // 获取列表数据
    getHousingList();
  }, []);
  return (
    <div className="roombox">
      <div className="roomhead">
        <div className="dtzf">
          <h2>地图找房</h2>
          <p>直接对比小区位置</p>
        </div>
        <div className="vrkf">
          <h2>VR看房</h2>
          <p>身临其境体验看房</p>
        </div>
      </div>

      <div>
        <div title="两列">
          <Dropdown>
            <Dropdown.Item key="sorter" title="区域">
              <div style={{ padding: 12 }}></div>
            </Dropdown.Item>
            <Dropdown.Item key="bizop" title="房型">
              <div style={{ padding: 12 }}></div>
            </Dropdown.Item>
            <Dropdown.Item key="zop" title="价格">
              <div style={{ padding: 12 }}></div>
            </Dropdown.Item>
            <Dropdown.Item key="bip" title="更多">
              <div style={{ padding: 12 }}></div>
            </Dropdown.Item>
          </Dropdown>
        </div>
      </div>

      <div>
        <JumboTabs>
          <JumboTabs.Tab
            title=""
            description="整租"
            key="fruits"
          ></JumboTabs.Tab>
          <JumboTabs.Tab
            title=""
            description="智能生活"
            key="vegetables"
          ></JumboTabs.Tab>
          <JumboTabs.Tab
            title=""
            description="深呼吸"
            key="animals"
          ></JumboTabs.Tab>

          <JumboTabs.Tab
            title=""
            description="整租"
            key="fruit"
          ></JumboTabs.Tab>
          <JumboTabs.Tab
            title=""
            description="智能生活"
            key="vegetable"
          ></JumboTabs.Tab>
         
        </JumboTabs>
      </div>

      <div className="roomlist">
        {housingData.length &&
          housingData.map(
            (
              item: {
                img: string | undefined;
                title:
                  | string
                  | number
                  | boolean
                  | React.ReactElement<
                      any,
                      string | React.JSXElementConstructor<any>
                    >
                  | React.ReactFragment
                  | React.ReactPortal
                  | null
                  | undefined;
                time:
                  | string
                  | number
                  | boolean
                  | React.ReactElement<
                      any,
                      string | React.JSXElementConstructor<any>
                    >
                  | React.ReactFragment
                  | React.ReactPortal
                  | null
                  | undefined;
              },
              ind: React.Key | null | undefined
            ) => {
              return (
                <div key={ind} className="roomlister">
                  <dl>
                    <dt>
                      <img src={item.img} alt="" />
                    </dt>

                    <dd>
                      <span>{item.title}</span>
                    </dd>
                  </dl>
                </div>
              );
            }
          )}
      </div>
    </div>
  );
};
export default Room;
